<template>
   <div>
     <div class="head">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/SchoolInfo' }">数据管理</el-breadcrumb-item>
         <el-breadcrumb-item>社团管理</el-breadcrumb-item>
         <el-breadcrumb-item>信息管理</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
     <div class="content">
       <el-card>
         <div slot="header" class="dictionaryCardTitle">
           <p style="width:80px;text-align: center;">社团信息</p>
           <div class="dictiomarySelectDiv">
               <div class="selectName" style="margin-left:5px;"><p style="text-align: center;">社团名称</p><el-input placeholder="请输入字典名称"></el-input></div>
               <div class="selectName"><p style="text-align: center;">社团类型</p><el-input placeholder="请输入字典类型"></el-input></div>
               <div class="selectName">
                 <p style="text-align: center;">社团状态</p>
                 <el-select  v-model="dValue" placeholder="字典状态" style="margin-left:10px;">
                   <el-option label="正常" value="true"></el-option>
                   <el-option label="异常" value="false"></el-option>
                 </el-select>
               </div>
               <div class="selectButton">
                 <el-button type="primary" icon="el-icon-search" circle></el-button>
               </div>
             </div>
         </div>
         <el-table :data="dicData" style="width: 100%" border max-height="380">
           <el-table-column fixed prop="sid" label="编号">
           </el-table-column>
           <el-table-column prop="sname" label="社团名称" :width="flexColumnWidth('sname',dicData)">
           </el-table-column>
           <el-table-column prop="snameUrl" label="社团链接" :width="flexColumnWidth('snameUrl',dicData)">
           </el-table-column>
           <el-table-column prop="stype" label="社团类型" :width="flexColumnWidth('stype',dicData)">
           </el-table-column>
           <el-table-column prop="slocation" label="所属院校" :width="flexColumnWidth('slocation',dicData)">
           </el-table-column>
           <el-table-column prop="subjection" label="社团隶属" :width="flexColumnWidth('subjection',dicData)">
           </el-table-column>
           <el-table-column prop="zip" label="状态" width="100"
             :filters="[{ text: '正常', value: '正常' }, { text: '禁用', value: '禁用' }]">
             <div slot-scope="scope">
               <el-tag type="success" v-show="scope.row.schoolState==1">正常</el-tag>
               <el-tag type="danger" v-show="scope.row.schoolState!==1">禁用</el-tag>
             </div>
           </el-table-column>
           <el-table-column fixed="right" label="操作" width="100">
             <div slot-scope="scope">
               <el-button type="text" size="small">查看</el-button>
               <el-button type="text" size="small">编辑</el-button>
             </div>
           </el-table-column>
         </el-table>
         <el-pagination style="margin-top:20px;" 
         background 
         layout="prev, pager, next" 
         :total=package
         @current-change="schoolInfoPage"
         >
         </el-pagination>
       </el-card>
     </div>
   </div>
 </template>
 <script>
 import Axios from 'axios';
 
 export default ({
   methods: {
     schoolInfoPage(currentPage){
     const that=this
     Axios.get(that.localhost+'/school/findAll/'+currentPage+'/10').then(
       function(res){
         that.dicData=res.data.content;
         that.package=res.data.totalPages*15;
         // console.log(res.data.totalPages*10);
       }
     )
         // alert(currentPage);
 
     },
     flexColumnWidth(str, arr1, flag = 'max') {
       // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
       // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
       // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
       str = str + ''
       let columnContent = ''
       if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
         return
       }
       if (!str || !str.length || str.length === 0 || str === undefined) {
         return
       }
       if (flag === 'equal') {
         // 获取该列中第一个不为空的数据(内容)
         for (let i = 0; i < arr1.length; i++) {
           if (arr1[i][str].length > 0) {
             // console.log('该列数据[0]:', arr1[0][str])
             columnContent = arr1[i][str]
             break
           }
         }
       } else {
         // 获取该列中最长的数据(内容)
         let index = 0
         for (let i = 0; i < arr1.length; i++) {
           if (arr1[i][str] === null) {
             return
           }
           const now_temp = arr1[i][str] + ''
           const max_temp = arr1[index][str] + ''
           if (now_temp.length > max_temp.length) {
             index = i
           }
         }
         columnContent = arr1[index][str]
       }
       // console.log('该列数据[i]:', columnContent)
       // 以下分配的单位长度可根据实际需求进行调整
       let flexWidth = 0
       for (const char of columnContent) {
         if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
           // 如果是英文字符，为字符分配8个单位宽度
           flexWidth += 6
         } else if (char >= '\u4e00' && char <= '\u9fa5') {
           // 如果是中文字符，为字符分配15个单位宽度
           flexWidth += 15
         } else {
           // 其他种类字符，为字符分配8个单位宽度
           flexWidth += 8
         }
       }
       if (flexWidth < 80) {
         // 设置最小宽度
         flexWidth = 100
       }
       // if (flexWidth > 250) {
       //   // 设置最大宽度
       //   flexWidth = 250
       // }
       return flexWidth + 'px'
     }
   },
   created(){
     const that=this
     Axios.get(that.localhost+'/school/findAll/1/10').then(
       function(res){
         that.dicData=res.data.content;
         that.package=res.data.totalPages*10;
         // console.log(res.data.totalPages*10);
       }
     )
   },
   data() {
   return {
     localhost:this.global.localhost,
     dicData: [],
     dValue:"",
     package:100
   }
 },
   })
 </script>
       
 <style scoped>
 .content>>>.el-card>>>.el-table{
     overflow-x: hidden;
   }
 .el-table{
   overflow-x: hidden;
 }
 .dictiomarySelectDiv .el-input{
   width: 160px;
   min-width: 160px;
   margin-left: 10px;
 }
 .dictiomarySelectDiv .el-select{
   min-width: 160px;
 }
 .dictionaryCardTitle{
   display: flex;
   width: 100%;
   justify-content: center;
   flex-direction: column;
   font-weight: 600;
 }
 .dictiomarySelectDiv{
   width: 100%;
   margin-top: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 .selectName{
   display: flex;
   margin-left: 8px;
   align-items: center;
 }
 .selectName p{
   min-width: 70px;
 }
 .selectButton{
   margin-left: 30px;
 }
 .tableView{
   min-width: 100%;
 }
 .dictionaryCardTitle {
   display: flex;
   width: 100%;
   justify-content: center;
   flex-direction: column;
   font-weight: 600;
 }
 /* .dictiomarySelectDiv{
   display: flex;
 }
 .selectName{
   display: flex;
   flex-direction: row;
   width: auto;
 } */
 .el-table__column-filter-trigger{
   display: flexbox;
 }
 
 </style>